/**
 * 主题系统 - 支持深色/浅色模式自动适配
 * 使用 CSS 变量实现动态主题切换
 */

/* ==================== 浅色模式（默认） ==================== */
:root,
page {
  /* 品牌色 */
  --color-primary: #00d4aa;
  --color-primary-light: #33ddb9;
  --color-primary-dark: #00a88a;
  --color-primary-disabled: rgba(0, 212, 170, 0.3);

  /* 功能色 */
  --color-success: #07c160;
  --color-warning: #ffb703;
  --color-error: #fa3534;
  --color-info: #909399;

  /* 文字颜色 */
  --color-text-primary: #303133;
  --color-text-regular: #606266;
  --color-text-secondary: #909399;
  --color-text-placeholder: #c0c4cc;
  --color-text-disabled: #d9d9d9;
  --color-text-inverse: #ffffff;

  /* 背景颜色 */
  --color-bg-page: #f5f5f5;
  --color-bg-card: #ffffff;
  --color-bg-overlay: rgba(0, 0, 0, 0.4);
  --color-bg-hover: #f1f1f1;
  --color-bg-active: #e6e6e6;
  --color-bg-disabled: #f5f5f5;

  /* 边框颜色 */
  --color-border-light: #ebeef5;
  --color-border-base: #dcdfe6;
  --color-border-dark: #d4d4d4;

  /* 分割线颜色 */
  --color-divider: #e4e7ed;

  /* 阴影 */
  --shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);

  /* TabBar 颜色 */
  --tabbar-bg: #ffffff;
  --tabbar-text: #999999;
  --tabbar-text-active: #00d4aa;
  --tabbar-border: #e4e7ed;
}

/* ==================== 深色模式 ==================== */
@media (prefers-color-scheme: dark) {
  :root,
  page {
    /* 品牌色 - 深色模式下稍微调亮 */
    --color-primary: #00e6bb;
    --color-primary-light: #33edc7;
    --color-primary-dark: #00b899;
    --color-primary-disabled: rgba(0, 230, 187, 0.3);

    /* 功能色 - 深色模式下调整 */
    --color-success: #1adb7a;
    --color-warning: #ffc233;
    --color-error: #ff5252;
    --color-info: #a8abb2;

    /* 文字颜色 - 深色模式下反转 */
    --color-text-primary: #e5e5e5;
    --color-text-regular: #b8b8b8;
    --color-text-secondary: #8e8e93;
    --color-text-placeholder: #636366;
    --color-text-disabled: #48484a;
    --color-text-inverse: #1c1c1e;

    /* 背景颜色 - 深色模式 */
    --color-bg-page: #000000;
    --color-bg-card: #1c1c1e;
    --color-bg-overlay: rgba(0, 0, 0, 0.7);
    --color-bg-hover: #2c2c2e;
    --color-bg-active: #3a3a3c;
    --color-bg-disabled: #2c2c2e;

    /* 边框颜色 - 深色模式 */
    --color-border-light: #2c2c2e;
    --color-border-base: #38383a;
    --color-border-dark: #48484a;

    /* 分割线颜色 */
    --color-divider: #38383a;

    /* 阴影 - 深色模式下减弱 */
    --shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8rpx 24rpx rgba(0, 0, 0, 0.5);

    /* TabBar 颜色 */
    --tabbar-bg: #1c1c1e;
    --tabbar-text: #8e8e93;
    --tabbar-text-active: #00e6bb;
    --tabbar-border: #38383a;
  }
}

/* ==================== 主题工具类 ==================== */

/* 文字颜色工具类 */
.text-primary {
  color: var(--color-text-primary) !important;
}

.text-regular {
  color: var(--color-text-regular) !important;
}

.text-secondary {
  color: var(--color-text-secondary) !important;
}

.text-placeholder {
  color: var(--color-text-placeholder) !important;
}

.text-brand {
  color: var(--color-primary) !important;
}

/* 背景颜色工具类 */
.bg-page {
  background-color: var(--color-bg-page) !important;
}

.bg-card {
  background-color: var(--color-bg-card) !important;
}

.bg-hover {
  background-color: var(--color-bg-hover) !important;
}

/* 边框颜色工具类 */
.border-light {
  border-color: var(--color-border-light) !important;
}

.border-base {
  border-color: var(--color-border-base) !important;
}

.border-dark {
  border-color: var(--color-border-dark) !important;
}

/* ==================== 组件主题适配 ==================== */

/* 卡片组件 */
.theme-card {
  background-color: var(--color-bg-card);
  border: 1rpx solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
}

/* 输入框组件 */
.theme-input {
  background-color: var(--color-bg-card);
  border: 1rpx solid var(--color-border-base);
  color: var(--color-text-primary);

  &::placeholder {
    color: var(--color-text-placeholder);
  }
}

/* 按钮组件 */
.theme-button {
  background-color: var(--color-primary);
  color: #ffffff;

  &:active {
    background-color: var(--color-primary-dark);
  }

  &.disabled {
    background-color: var(--color-primary-disabled);
  }
}

/* 列表项组件 */
.theme-list-item {
  background-color: var(--color-bg-card);
  border-bottom: 1rpx solid var(--color-divider);

  &:active {
    background-color: var(--color-bg-hover);
  }
}

/* 导航栏组件 */
.theme-navbar {
  background-color: var(--color-bg-card);
  border-bottom: 1rpx solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
}

/* TabBar 组件 */
.theme-tabbar {
  background-color: var(--tabbar-bg);
  border-top: 1rpx solid var(--tabbar-border);

  .tab-item {
    color: var(--tabbar-text);

    &.active {
      color: var(--tabbar-text-active);
    }
  }
}

/* 弹窗组件 */
.theme-modal {
  background-color: var(--color-bg-card);
  box-shadow: var(--shadow-lg);
}

/* 分割线组件 */
.theme-divider {
  background-color: var(--color-divider);
}

